<template>
  <div class="emergency_box">
    <div class="emergency_top">
      <div class="emergency_title">发货及时率</div>
    </div>

    <div v-if="tableData" class="echarts_container">
      <div id="map_sale" class="col-md-12  col-sm-12 col-xs-12" style="height: 100%;" />
    </div>
    <div v-else class="echarts_noData">
      <svg-icon icon-class="暂无数据" />
    </div>
  </div>
</template>

<script>
import { deliverTimeliness } from '@/api/saleManage/saleBoard'
import { mapGetters } from 'vuex'
export default {
  props: {
    targetNumber: {
      type: Number,
      default: 60
    }
  },
  computed: {
    ...mapGetters([
      'windowResizeTag'
    ])
  },
  watch: {
    windowResizeTag() {
      if (this.myChart || this.vertical) {
        this.$nextTick(() => {
          setTimeout(() => {
            this.drawLine()
          }, 500)
        })
      }
    }
  },
  data() {
    return {
      msg: 'fafa',
      tableData: {},
      allData: [],
      searchDateNumber: 0,
      targetValueArr: [],
      myChart: undefined,
      timer: undefined
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getOEEData()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  created() {
    this.getOEEData()
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getOEEData() {
      deliverTimeliness({ companyId: this.$store.state.user.companyId }).then(res => {
        this.tableData = res.data
        this.targetValueArr = []
        for (let i = 0; i < this.tableData.length; i++) {
          this.targetValueArr.push(this.targetNumber)
        }
        this.$nextTick(() => {
          this.drawLine()
        })
      })
    },
    drawLine() {
      if (this.myChart) {
        this.$echarts.init(document.getElementById('map_sale')).dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById('map_sale'))
      this.myChart.setOption({
        legend: [
          {
            right: '2%',
            itemGap: 50,
            itemHeight: 10,
            itemWidth: 25,
            data: ['预警值', '及时率']
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: (params) => {
            return `${params[0].name}<br><span style="background:rgb(255,98,100);display:inline-block;height:10px;width:10px;border-radius: 10px;margin-right:5px;"></span>${params[0].seriesName}:${params[0].value} % <br><span style="background:rgb(0,142,139);display:inline-block;height:10px;width:10px;border-radius: 10px;"></span> ${params[1].seriesName}:${params[1].value} % `
          }
        },
        grid: {
          top: '35',
          left: '2%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.3)'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#999999',
              fontSize: 14
            }
          },
          axisTick: {
            show: false
          },
          data: this.tableData.map(item => item.month)
        }],
        yAxis: [{
          // name: '单位%',
          nameTextStyle: { // x轴name的样式调整
            padding: [0, 30, 0, 0]
          },
          type: 'value',
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'rgba(153, 153, 153, 0.3)',
              width: 1
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(153, 153, 153, 0.3)'
            }
          },
          axisLabel: {
            formatter: '{value}%',
            textStyle: {
              color: '#959FA9',
              fontSize: 14
            }
          }
        }],
        series: [
          {
            name: '预警值',
            type: 'line',
            symbolSize: 10, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: 'rgb(255,98,100)'
              },
              lineStyle: {
                color: 'rgb(255,98,100)'
              }
            },
            data: this.targetValueArr
          },
          {
            name: '及时率',
            type: 'line',
            symbolSize: 10, // 设置折线上圆点大小
            symbol: 'circle', // 设置拐点为实心圆
            itemStyle: {
              normal: {
                color: 'rgb(0,142,139)'
              },
              lineStyle: {
                color: 'rgb(0,142,139)'
              }
            },
            data: this.tableData.map(item => item.rate)
          }
        ]

      })
    }
  }
}
</script>

<style lang="less" scoped>
.emergency_box{
  width: 100%;
  height: calc(100% - 50px);
}
  .emergency_top{
    display: flex;
    justify-content: space-between;
    .emergency_title{
      font-size: 20px;
      line-height: 34px;
      font-weight: bold;
      color: #333333;
      padding-top: 16px;
      padding-left: 20px;
    }
  }

.echarts_container{
  width: 100%;
  height: 100%;
  padding:0 10px;
}
</style>

